import { Component } from "react";
// swiper@5.4.5
import Swiper from "swiper/js/swiper.js"; // 引入js
import "swiper/css/swiper.min.css"; // 引入样式
import "./style.scss";

interface Props {}
interface State {}
class Index extends Component<Props, State> {
  componentDidMount(): void {
    new Swiper(".swiper-container", {
      autoplay: true,
      loop: true,
      pagination: {
        el: ".swiper-pagination",
      },
    });
  }

  render() {
    return (
      <>
        <div className="swiper-container">
          <div className="swiper-wrapper">
            <div className="swiper-slide">
              <img
                src="https://pic.maizuo.com/usr/movie/f22165e0d71bdc81e380b4f9e9b1ad1e.jpg"
                alt=""
              />
            </div>
            <div className="swiper-slide">
              <img
                src="https://pic.maizuo.com/usr/movie/90f3c143e34ea9c9d29a759885e3d627.jpg"
                alt=""
              />
            </div>
            <div className="swiper-slide">
              <img
                src="https://pic.maizuo.com/usr/movie/f024f2d0569907c186eb7bb2ce45a83b.jpg"
                alt=""
              />
            </div>
            <div className="swiper-slide">
              <img
                src="https://pic.maizuo.com/usr/movie/59fd3ddac3c29e17916e1fddaba0041b.jpg"
                alt=""
              />
            </div>
            <div className="swiper-slide">
              <img
                src="https://pic.maizuo.com/usr/movie/119576cdfadde4fc917523c95b2b1800.jpg"
                alt=""
              />
            </div>
          </div>
          <div className="swiper-pagination"></div>
        </div>
      </>
    );
  }
}
export default Index;
